<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./Public/bt/css/bootstrap.min.css">
    <script src="./public/jquery.11.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./public/ind.css"/>
    <link rel="stylesheet" href="./public/animate.css">
    <script>
        $(function () {
            //删除
            $('.box').on('click', '.del', function () {
                if(!confirm('确认删除吗？')) return;
                var id = $(this).attr('id');
                var that = $(this);
                $.ajax({
                    type: 'get',
                    data: {'id' : id},
                    url : 'index.php?c=Wish&a=del',
                    dataType: 'json',
                    success: function (phpData) {
                        if(phpData == 'success'){
                            that.parents('dl').remove();
                        }else if(phpData == 'error'){
                            alert('操作失败');
                        }else{
                            alert('傻了');
                        }
                    }
                })
            })
            //表单提交事件
            $('form').submit(function () {
                //序列化 可以抓取from里面的所有内容
                var formData = $(this).serialize();
                $.ajax({
                    type:'post',
                    data:formData,
                    url:'index.php?c=Wish&a=add',
                    dataType:'json',
                    success:function (phpData) {
                        console.log(phpData);
                        //组合字符串
                        var str = '';
                        str += '<dl class="msg box1 animated flash">';
                        str += '<dt>';
                        str += '</dt>';
                        str += '<dd>昵称：'+phpData.title+'</dd>';
                        str += '<dd>♥愿：'+phpData.content+'</dd>';
                        str += '<dd>';
                        str += '<a href="javascript:;" class="del" id="'+phpData.id+'"><span class="glyphicon  glyphicon-remove btn btn-sm" aria-hidden="true"></span></a>';
                        str += '<a href="?c=Wish&a=edit&id='+phpData.id+'"><span class="glyphicon glyphicon-pencil btn btn-sm" aria-hidden="true"></span></a>';
                        str += '</dd>';

                        str += '</dl>';
                        //把重组的字符串写入msg
                        $('.box').append(str);
                        //重置 全清
                        $('form')[0].reset();
                        $('#myModal').modal('hide');
                    }
                })
            })
        })
    </script>
</head>
<body>
	<!--导航条-->
	<nav class="navbar navbar-default">
	  	<div class="container-fluid">
		      	<ul class="nav navbar-nav navbar-right">
			        <li>
			        	<a href="#">你好！</a>
			        	<?php if(isset($_SESSION['username'])): ?>
						    <li>欢迎<?php echo $_SESSION['username'] ?> 回来!<a href="?c=Mumber&a=out">退出</a></li>
						<?php else: ?>
							<li><a href="?c=Mumber&a=login" type="submit" >请登录</a></li>
							<li><a href="?c=Mumber&a=reg" type="submit" >免费注册</a></li>
						<?php endif ?>				
			        </li>

			    </ul>
	    	</div>
	  	</div>
	</nav>       
    <div class="container">
        <div style="width: 250px; margin: 0 auto;" class="logo-p animated bounceInDown"><img src="./img/01.jpg" class="logo" alt="" style="width: 100%;"></div>
        <div class="box" >
            <?php $arr=array('swing','tada','shake','flash'); ?>
            <?php foreach ($data as $k=>$v): ?>

                <dl class="msg box1 animated <?php echo $arr[mt_rand(0,count($arr)-1)];?>" style="background: rgb(<?php echo mt_rand(22,222);?>,<?php echo mt_rand(22,222);?>,<?php echo mt_rand(22,222);?>)">
                    <dt></dt>
                    <dd>昵称：<?php echo $v['title'] ?></dd>
                    <dd>♥愿：<?php echo $v['content'] ?></dd>
                    <dd>
                        <a href="javascript:;" class="del" id="<?php echo $k;?>"><span class="glyphicon  glyphicon-remove btn btn-sm" aria-hidden="true"></span></a>
                        <a href="?c=Wish&a=edit&id=<?php echo $k;?>" ><span class="glyphicon glyphicon-pencil btn btn-sm" aria-hidden="true"></span></a>
                    </dd>
                </dl>
            <?php endforeach ?>
        </div>
        <div class="xu">
            <div  data-toggle="modal" data-target="#myModal" class="wang">许下愿望</div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">许下小小的愿望</h4>
                </div>
                <div class="modal-body" style="overflow: hidden">
                    <form action="javascript:;" method="post">
                        <div class="form-group">
                            <label for="exampleInputEmail1">昵称</label>
                            <input type="text" class="form-control" id="exampleInputEmail1" name="title" 
                                <?php if(isset($_SESSION['username'])) :?>
                                    value="<?php echo $_SESSION['username']?>"
                                <?php  endif ?>
                            >
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">内容</label>
                            <textarea name="content" class="form-control" rows="10" style="resize: none;"></textarea>
                        </div>
                        <hr>
                        <button type="submit" class="btn btn-default alert-success" style="float: right; " >许下愿望</button>
                        <button data-dismiss="modal" class="btn" style="float: right;margin-right: 10px">不许愿了</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="./public/bt/js/bootstrap.min.js"></script>
</body>
</html>